<script setup>
import {ref} from 'vue'
import {fetchCityData} from '../api/weatherAPI'
//引入状态管理
import {useCityStore} from '../stores/cityStore'
const city = ref("")//响应式数据
//获取store实例
const cityStore = useCityStore()

function request(){
    //调用网络请求函数
    getData(city.value)
}
getData(city.value)

//网络请求函数
async function getData(cityName) {
    //城市搜索
    const res = await fetchCityData(cityName)
    console.log(res)
    console.log("-----更新状态之前-----")
    console.log(cityStore.location)
    cityStore.updateLocation(res.location[0]) //执行更新动作（action）
    console.log("-----更新状态之后-----")
    console.log(cityStore.location)
}

</script>
<template>
    <div class="city-search" >
        <input type="search" name="" id="" placeholder="请输入城市名称" v-model="city" @change="request()">
    </div>
</template>

<style scoped>
.city-search>input {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    border-radius: 1rem;
   width: 30%;  
}
.city-search{
    text-align: center;
}

</style>